<template>
    <div class="EditorView" ref="view"></div>
</template>

<script>
import { editor } from "monaco-editor-core";
import { prepareVirtualFiles, loadGrammars, loadTheme } from "monaco-volar";
import { loadMonacoEnv, loadOnigasm } from "./env";

export default {
    data() {
        return {
            Editor: null,
            Code: '',
        }
    },
    mounted() {
        Promise.all([loadMonacoEnv(), loadOnigasm(), loadTheme()]).then(([, , theme]) => {
            prepareVirtualFiles();
            const model = editor.createModel(this.Code, 'vue');
            this.Editor = editor.create(this.$refs.view, {
                theme,
                automaticLayout: true,
                scrollBeyondLastLine: false,
                inlineSuggest: {
                    enabled: false,
                },
            });
            loadGrammars(this.Editor);
            this.Editor.setModel(model);
        });
    },
    methods: {
        setCode(val) {

            this.Code = val;
            if (this.Editor) {
                const model = editor.createModel(val, 'vue');
                this.Editor.setModel(model);
            };
        },
        getCode() {
            var value = this.Editor.getValue();
            return value;
        }
    },
    beforeDestroy() {
        console.log(this.Editor.dispose());
    },
}

</script>

<style lang="less">
.EditorView {
    width: 100%;
    height: 100%;
}
</style>



